<template>
    <div class="center-box">
        <div class="botton">
            <div class="imgheng">
                <div class="one">
                <div class="img1"><img src="../assets/Vector (1).png" alt=""></div>
                <div class="zi1">7天无理由退货</div>
                </div>
                <div class="two">
                <div class="img2"><img src="../assets/Vector (1).png" alt=""></div>
                <div class="zi2">满99元全场免邮</div>
                </div>
                <div class="three">
                <div class="img3"><img src="../assets/Vector (1).png" alt=""></div>
                <div class="zi3">100%品质保证</div>
                </div>
            </div>
            <div class="pic"><img src="../assets/Ellipse 7.png" alt=""></div>
            <div class="second-botton">
                <ul>
                    <li>
                        <router-link to="/main">首页</router-link>
                    </li>
                    <li>|</li>
                    <li>
                        <router-link to="/allshop">全部商品</router-link>
                    </li>
                    <li>|</li>
                    <li>
                        <router-link to="">关于我们</router-link>
                    </li>
                </ul>
            </div>
            <div class="finlly">商城版权所有 © 2012-2021 </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bottons'

}
</script>

<style scoped>
.center-box {
    width: 100%;
    height: 336px;
    background-color: #2F2F2F;
    ;

}

.botton {
    width: 1200px;
    height: 100%;
    position: relative;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);

}
.imgheng{
    width: 976px;
    height: 37px;
    margin: auto;
    transform: translate(0, 150%);
    display: flex;
    justify-content: space-between;

}
.one,.two,.three{
    display: flex;
    width: 197px;
}
.img1 {
    width: 29px;
    height: 37px;
}

.img2 {
    width: 29px;
    height: 37px;
}

.img3 {
    width: 29px;
    height: 37px;
}

.zi1 {
    font-weight: 500;
    font-size: 20px;
    line-height: 37px;
    color: #FFFFFF;
    padding-left: 10px;
    
}

.zi2 {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    line-height: 37px;
    color: #FFFFFF;
    padding-left: 10px;
}

.zi3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    line-height: 37px;
    color: #FFFFFF;
    padding-left: 10px;
}

.pic {
    left: 936px;
    top: 170px;
    transform: translate(0,250%);
}

.second-botton {
    height: 16px;
    width: 250px;
    transform: translate(182%,800%);
    justify-content: space-between;


}

.second-botton ul {
    display: flex;
    justify-content: space-between;
}

.second-botton ul li {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #888888;
    list-style-type: none;
}
.second-botton ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #888888;
    list-style-type: none;
    text-decoration: none;
}


.finlly {
    position: absolute;
    bottom: 36px;
    left: 501px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #888888;
}
</style>